import React, {Component} from 'react';
import {Table, Divider} from 'antd';
import {settings} from "../../res/js/common-settings";
import reqwest from 'reqwest';

const pagination = {
    pageSize: 2,
    pageSizeOptions: ['2', '20', '50', '10000'],
    showSizeChanger: true,
    showTotal: (total, range) => {
        return `第 ${range[0]} - ${range[1]} 条数据， 共 ${total} 条数据`;
    }
};

const columns = [
    {
        title: '序号',
        key: 'index',
        render: (state, item, index) => {
            return `${index+1}`
        },
        width: '70px'
    },
    {
        title: '应用名称',
        dataIndex: 'name',
        key: 'name',
        render: (text, record) => (
            <a href="javascript:;">
                <div className={'pull-left'}><img className={'app-logo'} src={record.logo} /></div>
                <div className={'app-name'}>{text}</div>
            </a>
        )
    },
    {
        title: '简介',
        dataIndex: 'brief',
        key: 'brief',
        width: '20%'
    },
    {
        title: '客户',
        key: 'customer',
        dataIndex: 'customer',
        render: customer => (
            <span>
                {customer.map(item => (<span key={item} style={{padding: '2px 5px'}}>{item}</span>))}
            </span>
        )
    },
    {
        title: '应用版本',
        key: 'latest_version',
        dataIndex: 'latest_version',
        render: versions => {
            const android = versions.android,
                  ios = versions.ios;
            return (
                <div>
                    <a href={android.download || '#'} className={'app-version'}>
                        <span style={{width: '33px'}}>安卓: </span>
                        <span>{android.version}</span>
                        <span style={{width: '90px', paddingLeft: '5px'}}>({android.last_update})</span>
                    </a>
                    <a href={ios.download || '#'} className={'app-version'}>
                        <span style={{width: '33px'}}>IOS: </span>
                        <span>{ios.version}</span>
                        <span style={{width: '90px', paddingLeft: '5px'}}>({ios.last_update})</span>
                    </a>
                </div>
            );
        }
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <span>
                <a href="javascript:;">Invite</a>
                <Divider type="vertical"/>
                <a href="javascript:;">Delete</a>
            </span>
        ),
    }
];


class ProductList extends Component{
    state = {
        data: [],
        pagination: pagination,
        loading: false
    };

    handleTableChange = (pageSelector, filters) => {
        const pager = {...this.state.pagination, current: pageSelector.current, pageSize: pageSelector.pageSize};
        this.setState({
            pagination: pager
        });

        const params = {
            pageSize: pager.pageSize,
            page: pager.current,
            ...filters
        };

        this.fetch(params);
    };

    fetch = (params = {}) => {
        this.setState({loading: true});
        reqwest({
            url: settings.urls.productList.url,
            method: settings.urls.productList.type,
            data: params,
            type: 'json'
        }).then((res) => {
            const temp = { ...this.state.pagination, total: res.data.total };
            this.setState({
                loading: false,
                data: res.data.list,
                temp,
            });
        })
    };

    componentDidMount(){
        this.fetch({page: 1});
    }

    render() {
        return (
            <Table  columns={columns}
                    dataSource={this.state.data}
                    pagination={this.state.pagination}
                    loading={this.state.loading}
                    onChange={this.handleTableChange}/>
        );
    }
}


export default ProductList;